{% extends 'base.html' %}
{% block extra-head %}
<link href="/css/left_menu.css" rel="stylesheet" type="text/css" />  
{% endblock %}
{% block contenido %}

<script>
	function cambiarSelected(numero)
	{
		for(i =1;i<6;i++)
			document.getElementById(i).className = '';
		document.getElementById(numero).className = 'selected';
	}
	function inicio()
	{
		jQuery("#contenidoUsuario").html('Cargando.. <img src="/img/ajax-loader.gif" />');
		jQuery.post('/irInicio/',	
				function(data) {
					jQuery('#contenidoUsuario').html(data);
		});
	}
	function optIntroducirDatos()
	{
		jQuery("#contenidoUsuario").html('Cargando.. <img src="/img/ajax-loader.gif" />');
		jQuery.post('/irIntroducirDatos/',	
				function(data) {
					jQuery('#contenidoUsuario').html(data);
		});
	}
	function misEstadisticas()
	{
		jQuery("#contenidoUsuario").html('Cargando.. <img src="/img/ajax-loader.gif" />');
		jQuery.post('/misEstadisticas/',	
				function(data) {
					jQuery('#contenidoUsuario').html(data);
		});
	}
	function irBuzon()
	{
		jQuery("#contenidoUsuario").html('Cargando.. <img src="/img/ajax-loader.gif" />');
		jQuery.post('/irBuzon/',	
				function(data) {
					jQuery('#contenidoUsuario').html(data);
		});
	}
	function salir()
	{
		jQuery("#contenidoUsuario").html('Hasta la proxima.. <img src="/img/ajax-loader.gif" />');
		document.forms["formSalir"].submit();
	}
</script>

<div style="width:35%;float:left; width: 25%; margin-top: 15px; ">
		<div class="main_cont">
			<div class="menu_top_bg">Menu</div>
			<div class="sub_menu">
			<ul>
			<li><a href="#" id="1" onclick="javascript:cambiarSelected(1); inicio();" class="selected" >Inicio</a></li>
			<li><a href="#" id="2" onclick="javascript:cambiarSelected(2); optIntroducirDatos();" >Introducir datos</a></li>
			<li><a href="#" id="3" onclick="javascript:cambiarSelected(3); misEstadisticas();" >Mis estadisticas</a></li>
			<li><a href="#" id="4" onclick="javascript:cambiarSelected(4); irBuzon();" >Buzon</a></li>
			<li><a href="#" id="5" onclick="javascript:cambiarSelected(5); salir();" >Salir</a></li>
			</ul>
			</div>
		</div>
</div>
<div id="contenidoUsuario" style="width:75%;float:right;background:white; margin-top: 15px;" >
<p>
	pagina principal del usuario
</p>
</div>

<!-- Formulario oculto para salir -->
<form id="formSalir" name="formSalir" action="/salir/" >
</form>
{% endblock %}